import React, { memo, useEffect } from "react";
import { useDispatch, useSelector, shallowEqual } from "react-redux";

import "./index.scss";
import artistAction from "store/action/artist";

import WYThemeHeaderNormal from "@/components/theme-header-normal";
import WYAlphaList from "./c-cpns/alpha-list";
import WYArtistItemV1 from "./c-cpns/artist-item";

export default memo(function WYArtistList() {
  const dispatch = useDispatch();
  useEffect(() => {
    dispatch(artistAction.getArtistList());
  }, [dispatch]);
  const { currentType, artistList } = useSelector(
    (state) => ({
      artistList: state.getIn(["artist", "artistList"]),
      currentType: state.getIn(["artist", "currentType"]),
    }),
    shallowEqual
  );

  return (
    <div className="wy-artist-list">
      <WYThemeHeaderNormal title={currentType.name} />
      <WYAlphaList />
      <div className="artist-list">
        {artistList.length > 0 &&
          artistList.map((item, index) => (
            <WYArtistItemV1 info={item} index={index} key={index} />
          ))}
      </div>
    </div>
  );
});
